<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Transtable documentation</title>
<style type="text/css">
.main_content {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 9pt;
	background-color: #333;
	width: 800px;
	margin-right: auto;
	margin-left: auto;
	padding: 5px
}
.header {
	font-family: Verdana, Geneva, sans-serif;
	width: 800px;
	margin-right: auto;
	margin-left: auto
}
.header h1 {
	font-size: 40pt;
	color: #000;
	display: inline
}
.content {
	background-color: #FFF;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 15px;
	padding-left: 5px
}
.insource {
	font-family: "Courier New", Courier, monospace
}

/* tables */
.table1 td {
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #999;
	padding-right: 5px;
	padding-left: 5px;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #CCC
}
.main_content h1 {
	font-size: 16pt;
	font-weight: bold;
	margin-top: 15px;
	color: #FFF;
	margin-bottom: 15px;
	background-color: #333;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 5px;
	left: -25px;
	position: relative;
	display: inline-block;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px
}
h2 {
	font-size: 14pt;
	font-weight: bold;
	margin-top: 20px;
	padding-left: 15px;
	color: #FFF
}
h3 {
	font-size: 10pt;
	font-weight: bold
}
.by {
	font-size: 8pt;
	position: relative;
	color: #CCC;
	text-align: right;
	margin-bottom: 6px;
	font-style: italic
}
.table1 tr.disabled {
	color: #999
}
.table1 th {
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #CCC;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #666;
	padding-top: 2px;
	padding-right: 5px;
	padding-bottom: 2px;
	padding-left: 5px;
	color: #333
}
.table1 td {
	padding: 5px;
}
.table1 tr:hover {
	background-color: #E6ECFF
}
.showsource, .showsource_ex {
	font-family: "Courier New", Courier, monospace;
	white-space: pre;
	background-color: #F0F0F0;
	margin-bottom: 10px;
	padding: 5px;
	overflow: scroll
}
.fp {
	font-weight: bold;
	color: #06F
}
.donatecont {
	background-color: #6CFF8A;
	padding: 5px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	margin-top: 25px;
	margin-right: 15px;
	margin-bottom: 15px;
	margin-left: 15px;
	text-align: center;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11pt;
	font-weight: bold;
	color: #333;
	border: 1px solid #666
}

</style>

</head>

<body>
<div class="header">
	<h1>Transtable</h1> 
	<span style="font-size: 12pt;">documentation</span> &amp; <a href="http://bojanmauser.from.hr/transtable/" target="_blank">demo</a></div>
<div class="main_content"><!-- section -->
	<div class="content">
		<h3>Contents of this document:</h3>
		<ul>
			<li><a href="#whatis">What is Transtable?</a></li>
			<li><a href="#ui">UI description</a></li>
			<li><a href="#setup">Setup</a></li>
			<li><a href="#options">Configuration options</a> </li>
			<li><a href="#use">How I use Transtable</a></li>
			<li><a href="#demo">Demo</a></li>
		</ul>
	</div>
	
	<h1>What is Transtable?<a name="whatis" id="whatis"></a></h1>
	<div class="content">
		<p>Transtable is  a simple web interface  <strong>for editing translations</strong> for your <a href="http://www.php.net">PHP</a> application. Translations  are <strong>stored in PHP arrays</strong>. For each language it will  generate one .php file with translations that you can include in your  application. </p>
		<p>This  is an example of a  translation file generated by  Transtable:</p>
		<blockquote>
			<pre class="showsource" type="php">&lt;?php<br />
$t['main_title'] = 'My Site';<br />$t['main_subtitle'] = 'Some subtitle';<br />$t['show_on_map'] = 'Show on map...';<br />$t['description'] = 'About';<br />$t['days_short']['mon'] = 'Mon';<br />$t['days_short']['tue'] = 'Tue';<br />$t['months_short']['1'] = 'Jan';<br />$t['months_short']['2'] = 'Feb';
</pre>
		</blockquote>
<p>Note  that an array that holds translations can be multidimensional which makes  it very convenient when using in loops or iterating in templates.</p>
<p><strong>Home page:</strong> <a href="http://code.google.com/p/transtable">http://code.google.com/p/transtable</a></p>
<p>&nbsp;		</p>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" id="donate_form" style="text-align:center">
	<input type="hidden" name="cmd" value="_s-xclick" />
	<input type="hidden" name="hosted_button_id" value="LEJYSVD46LQC4" />
	<input type="hidden" name="on0" value="Donation" />
	<select name="os0" style="margin-top:5px;margin-bottom:5px;">
		<option value="-">- $1.00</option>
		<option value="--">-- $3.00</option>
		<option value="---" selected="selected">--- $5.00</option>
		<option value="----">---- $10.00</option>
		<option value="-----">----- $15.00</option>
		<option value="------">------ $20.00</option>
	</select>
	<input type="hidden" name="currency_code" value="USD" />
	<br />
	<input name="submit" type="image" src="https://www.paypalobjects.com/WEBSCR-640-20110429-1/en_US/i/btn/btn_donate_LG.gif" alt="Donate via PayPal" title="Donate via PayPal" align="middle" border="0" />
</form>
	</div>
<!-- section -->
	<h1>UI description<a name="ui" id="ui"></a></h1>
	<div class="content">
		<p style="text-align:center"><img src="ui500.jpg" alt="ui" width="500" height="382" align="baseline" /></p>
		<p><strong>Buttons to change working directory</strong> are placed in the top left corner. First button is for directory specified with <a href="#translations_root"><span class="insource">translations_root</span></a> option and the others are  subdirectories.</p>
<p>Below buttons are <strong>checkboxes to show or hide columns</strong> with translations.</p>
		<p>The table contains translations, <strong>one column per language</strong>. Each row contains the name of the translation (index) and the value in different languages.</p>
		<p>You can <strong>click on the translation to edit</strong> and use basic <strong>HTML formatting.</strong> The value you enter will be saved automatically when you click on another translation. </p>
		<p>To edit index double click on the first cell.</p>
	</div>
	
	
<!-- section -->
	<h1>Setup<a name="setup" id="setup"></a></h1>
	<div class="content">
		<p>Transtable is  written in <a href="http://www.php.net/">PHP</a>, so to run it you'll have to have a web server with PHP enabled.</p>
		<ol>
			<li>				<strong>Extract files from a downloaded <a href="http://code.google.com/p/transtable/downloads/list">archive</a> to a folder accessible by the web server</strong><br />
				<br />
				After that you can open web browser and navigate to URL where Transtable is installed and it should be working, you should see some sample translations.<br />
				<br />
			</li>
			<li>			        <strong>Change configuration options and create an empty file for each language</strong><br />
				<br />
			Open <span class="insource">config.php</span> file for changing configuration options or create a new file named <span class="insource">config_override.php</span> to override options from <span class="insource">config.php</span>.<br />
			<br />
			Create an empty file for each language in the directory set by <a href="#translations_root" class="insource">translations_root</a> option and name it to match  pattern set by <a href="#file_name_pattern"><span class="insource">file_name_pattern</span></a> option. For example <span class="insource">en.php</span>, <span class="insource">de.php</span>, <span class="insource">fr.php</span>.<br />
			<br />
			Note:  if you downoaded .zip archive there are three sample files (en.php, de.php, es.php) in the translations directory. You can delete them.<br />
				<br />
			</li>
			<li>				<strong>Set file permissions			<br />
				<br />
			</strong>Files with translations have to be writable by the web server.	</li>
		</ol>
</div>
	
	
<!-- section -->
	<h1>Configuration options<a name="options" id="options"></a></h1>
	<div class="content">
		<p>Transtable reads configuration options from <span class="insource">config.php</span> file and from <span class="insource">config_override.php</span> file if you create one. With  <span class="insource">config_override.php</span> you override options from <span class="insource">config.php</span>. Using <span class="insource">config_override.php</span> is useful if you want to checkout  and update from SVN or  GIT repository.</p>
		<p>Options values  set in the <strong><span class="insource">$TTCFG['fireflies']</span></strong> array: </p>
		<table width="100%" border="0" cellpadding="0" cellspacing="0" class="table1">
			<tr>
				<th nowrap="nowrap">Option</th>
				<th>Default</th>
				<th>Description</th>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">translations_root<a name="translations_root" id="translations_root"></a></td>
				<td align="center" nowrap="nowrap" class="insource">/&lt;TRANSTABLE_ROOT&gt;/translations</td>
				<td><strong>Absolute</strong> file system path to a directory containing the translation  files. You can  organize the files in subdirectories. If you enter <span class="insource">&lt;TRANSTABLE_ROOT&gt;</span> it will be replaced with the absolute path to  the directory where Transtable is installed.</td>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">file_name_pattern<a name="file_name_pattern" id="file_name_pattern"></a></td>
				<td align="center" nowrap="nowrap" class="insource">..\.php</td>
				<td><strong>Regular expression</strong> pattern that  translation files names must match. Transtable will search only for files with names matching this  pattern in all subdirectories of the directory specified with <a href="#translations_root"><span class="insource">translations_root</span></a> option.</td>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">var_name</td>
				<td align="center" nowrap="nowrap" class="insource">t</td>
				<td>The name of the PHP array that holds translations in generated .php files.</td>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">page_title</td>
				<td align="center" class="insource">Transtable</td>
				<td> UI page title</td>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">enable_edit_index</td>
				<td align="center" class="insource">1</td>
				<td>Enable editing translation indexes (first column). Set to 0 to disable.</td>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">array_delimiter</td>
				<td align="center" class="insource">|</td>
				<td>Delimiter in the translation index for multi dimensional arrays.</td>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">enable_delete_translation</td>
				<td align="center" nowrap="nowrap" class="insource">1</td>
				<td>Enable deleting translations. Set to 0 to disable.</td>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">enable_add_translation</td>
				<td align="center" nowrap="nowrap" class="insource">1</td>
				<td>Enable adding new translations. Set to 0 to disable.</td>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">new_lines</td>
				<td align="center" nowrap="nowrap" class="insource">PHP_EOL</td>
				<td>New lines type in saved translation files.</td>
			</tr>
		</table>
		<p>Options values  set in the <strong><span class="insource">$TTCFG</span></strong> array: </p>
		<table width="100%" border="0" cellpadding="0" cellspacing="0" class="table1">
			<tr>
				<th nowrap="nowrap">Option</th>
				<th>Default</th>
				<th>Description</th>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">include_css</td>
				<td class="insource">&nbsp;</td>
				<td>Array of relative web paths to CSS files which will be included on Transtable page. This is useful if you want to add some styles for texts in the translation table. For example, to add a formatting similar to the  one at the web site where the text will be shown.</td>
			</tr>
		</table>
	</div>
	
<!-- section -->
	<h1>How I use Transtable<a name="use" id="use"></a></h1>
	<div class="content">
		<p>For localizing my PHP  applications I&rsquo;ve used simple PHP associative  arrays and I&rsquo;ve simply included the file with  translations for desired language into my application. So,  I&rsquo;ve created Transtable with the purpose of editing those files.</p>
<p>I set up one instance of the application and Transtable just for translators.  Transtable is set to work with the files in a folder where the application  stores its translation files, and so, after a translator  has edited a part of translation, he can  immediately see the changes in the application.</p>
<p>I put a simple  authorization on the site with .htaccess and send URL of  the Transtable to translators and they  can start translating. In my opinion, the fact that all  translators can edit all languages shouldn't be a problem because they are  trusted users. Also, it works like a feature,  because if you can see the translations in all languages that will give you a  better understanding of the context. In addition, you can improve or fix  translations made by others.</p>
<p>Then I commit the changed translation files to a repository and update the production site.</p>
	</div>	


<!-- section -->
	<h1>Demo<a name="demo" id="demo"></a></h1>
	<div class="content">
		<p>Check it out <a href="http://bojanmauser.from.hr/transtable/" target="_blank">here</a>. Note that saving is disabled so when you reload the page all changes will be lost.</p></div>	


<!-- main div -->
</div>





</body>
</html>
